
/**
 * =====地图的回显和展示，以及省市县三级联动 =======================================================================================================
 * ============================================================================================================
 * ============================================================================================================
 * ============================================================================================================
 * 1 引入 area.js  （省市县的json对象数组）
 * 2 引入 map.js 百度地图的js
 *
 * 前端示例：
 * <td>地区</td>
     <td colspan="3">
     <div class="am-u-sm-3">
     <input type="hidden" id="provinceData" value="${userEdit.province!''}"/>
     <input type="hidden" id="cityData" value="${userEdit.city!''}" />
     <input type="hidden" id="countyData" value="${userEdit.county!''}" />
     省份：<select id="province" name="province" onchange="onProvince()"></select>
     城市：<select id="city" name="city" onchange="onCity()"></select>
     县区：<select id="county" name="county" onchange="onCounty()"></select>
     </div>
     <div style="width: 500px;height:480px;border:1px solid #167fa1" id="map" class="am-u-sm-6">
 </div>
 </td>

 */

/**
 * 初始化省 -回显
 */
function provinceInit(){
    var provinceData = $("#provinceData").val();
    var optionProvince = "";
    optionProvince += "<option class='selectOpenStyle' value='0'>==请选择省份==</option>";
    for (var i = 0; i < areas.length; i ++){
        var area = areas[i];
        if (parseInt(area.level) == 1){
            if (parseInt(provinceData) == parseInt(area.code)){
                optionProvince += "<option class='selectOpenStyle' selected value='" + area.code + "'>" + area.name + "</option>";
                var longitude = area.longitude;
                var latitude = area.latitude;
                loadPlace(longitude, latitude, 10);

            } else {
                optionProvince += "<option class='selectOpenStyle' value='" + area.code + "'>" + area.name + "</option>";
            }
        }
    }
    $("#province").append(optionProvince);
}

/**
 * 初始化市 -回显
 */
function cityInit(){
    var cityData = $("#cityData").val();
    var optionCity = "";
    optionCity += "<option class='selectOpenStyle' value='0'>==请选择城市==</option>";

    //拿到省,回显市的同时要添加其他相应的市数据
    var province = $("#province").val();
    for (var i = 0; i < areas.length; i ++){
        var area = areas[i];
        if (parseInt(province) == parseInt(area.parentCode)){
            if (parseInt(cityData) == parseInt(area.code)){
                optionCity += "<option class='selectOpenStyle' selected value='" + area.code + "'>" + area.name + "</option>";
                var longitude = area.longitude;
                var latitude = area.latitude;
                loadPlace(longitude, latitude, 12);
            } else {
                optionCity += "<option class='selectOpenStyle' value='" + area.code + "'>" + area.name + "</option>";
            }
        }
    }

    $("#city").append(optionCity);
}

/**
 * 初始化县 -回显
 */
function countyInit(){
    var countyData = $("#countyData").val();
    var optionCounty = "";
    optionCounty += "<option class='selectOpenStyle' value='0'>==请选择县区==</option>";

    //拿到市，回显县的同时要添加其他相应的县数据
    var city = $("#city").val();
    for (var i = 0; i < areas.length; i ++){
        var area = areas[i];
        if (parseInt(city) == parseInt(area.parentCode)){
            if (parseInt(countyData) == parseInt(area.code)){
                optionCounty += "<option class='selectOpenStyle' selected value='" + area.code + "'>" + area.name + "</option>";
                var longitude = area.longitude;
                var latitude = area.latitude;
                loadPlace(longitude, latitude);
            } else {
                optionCounty += "<option class='selectOpenStyle' value='" + area.code + "'>" + area.name + "</option>";
            }
        }
    }

    $("#county").append(optionCounty);
}


// ============================================

/**
 * 点击省的时候触发事件
 */
function onProvince(){
    removeOptionAll("city");
    removeOptionAll("county");
    //城市数据加载
    var province = $("#province").val();
    var optionCity = "";
    optionCity += "<option class='selectOpenStyle' selected value='0'>==请选择城市==</option>";
    for (var i = 0; i < areas.length; i ++){
        var area = areas[i];
        if (parseInt(province) == parseInt(area.parentCode)){
            optionCity += "<option class='selectOpenStyle' value='" + area.code + "'>" + area.name + "</option>";
        }
    }
    $("#city").append(optionCity);

    //县城数据
    var optionCounty = "";
    optionCounty += "<option class='selectOpenStyle' selected value='0'>==请选择县区==</option>";
    $("#county").append(optionCounty);

    //加载地图
    for (var k = 0; k < areas.length; k ++){
        var area = areas[k];
        if (parseInt(province) == parseInt(area.code)){
            var longitude = area.longitude;
            var latitude = area.latitude;
            loadPlace(longitude, latitude, 10);
        }
    }
}

/**
 * 点击市的时候触发事件
 */
function onCity(){

    removeOptionAll("county");
    //城市数据加载
    var city = $("#city").val();
    var optionCounty = "";
    optionCounty += "<option class='selectOpenStyle' selected value='0'>==请选择县区==</option>";
    for (var i = 0; i < areas.length; i ++){
        var area = areas[i];
        if (parseInt(city) == parseInt(area.parentCode)){
            optionCounty += "<option class='selectOpenStyle' value='" + area.code + "'>" + area.name + "</option>";
        }
    }
    $("#county").append(optionCounty);

    //加载地图
    for (var k = 0; k < areas.length; k ++){
        var area = areas[k];
        if (parseInt(city) == parseInt(area.code)){
            var longitude = area.longitude;
            var latitude = area.latitude;
            loadPlace(longitude, latitude, 10);
        }
    }
}

/**
 * 点击县的时候触发
 */
function onCounty(){

    var county = $("#county").val();
    //加载地图
    for (var k = 0; k < areas.length; k ++){
        var area = areas[k];
        if (parseInt(county) == parseInt(area.code)){
            var longitude = area.longitude;
            var latitude = area.latitude;
            loadPlace(longitude, latitude, 10);
        }
    }
}



$(function() {

    //进入后初始化回显
    provinceInit();
    cityInit();
    countyInit();

    $("#provinceData").val("");
    $("#cityData").val("");
    $("#countyData").val("");

});

//根据经纬度显示地区
function loadPlace(longitude, latitude, level) {
    if (parseFloat(longitude) > 0 || parseFloat(latitude) > 0) {
        level = level || 13;
        //绘制地图
        var map = new BMap.Map("map"); // 创建Map实例
        var point = new BMap.Point(longitude, latitude); //地图中心点
        map.centerAndZoom(point, level); // 初始化地图,设置中心点坐标和地图级别。
        map.enableScrollWheelZoom(true); //启用滚轮放大缩小
        //向地图中添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);

        //向地图中添加缩略图控件
        var ctrlOve = new window.BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
        });
        map.addControl(ctrlOve);

        //向地图中添加比例尺控件
        var ctrlSca = new window.BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);

    }
}

/**
 * =====end=======================================================================================================
 * ============================================================================================================
 * ============================================================================================================
 * ============================================================================================================
 */
